<template>
<!-- T日同向交易不公平分析（汇总） -->
    <div class="fund-list">
        <content-layout>
            <el-form label-width="90px" label-position="right" slot="searchSlot">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="选择组合：">
                            <el-input
                                placeholder="选择组合"
                                prefix-icon="el-icon-search"
                                v-model="searchForm.pFundList" 
                                @focus="focusSelect"
                                size="mini"
                                style="width: 82%"
                            >
                            </el-input>   
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="交易日历：">
                            <el-select v-model="searchForm.pCalendar" size="mini">
                                <el-option value="CHINA_EX" label="交易所日历"></el-option>
                            </el-select>    
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="视图类型：">
                            <el-select v-model="searchForm.pViewType" size="mini" disabled>
                                <el-option value="0" label="html"></el-option>
                                <el-option value="1" label="其他"></el-option>
                            </el-select>    
                        </el-form-item>
                    </el-col>
                </el-row> 
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="时间频率：">
                            <el-select v-model="searchForm.pTime" size="mini" disabled>
                                <el-option value="时间段" label="时间段"></el-option>
                            </el-select>    
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="开始日期：">
                            <el-date-picker
                                v-model="searchForm.pBegDate"
                                type="date"
                                placeholder="选择日期"
                                value-format="yyyyMMdd"
                                size="mini">
                            </el-date-picker>  
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="结束日期：">
                            <el-date-picker
                                v-model="searchForm.pEndDate"
                                type="date"
                                placeholder="选择日期"
                                value-format="yyyyMMdd"
                                size="mini">
                            </el-date-picker>    
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" label="">
                        <el-button type="primary" @click="openSettingDialog">查询</el-button>
                        <el-button @click="exportFile">导出</el-button>
                    </el-col>
                </el-row>    
            </el-form>
            <h2 slot="titleSlot">T日同向交易不公平分析（汇总）</h2>
            <template v-if="tableIs">
                <el-table 
                    :data="tableData.slice((page.currentPage-1)*page.pageSize,page.currentPage*page.pageSize)" 
                    border 
                    size="mini" 
                    style="width: 100%" 
                    height="66vh" 
                    slot="tableSlot"
                    :header-cell-style="{'text-align':'center'}"
                    v-loading="tableLoading"
                    stripe
                >
                    <el-table-column prop="fundCode" label="组合代码" min-width="140px"> </el-table-column>
                    <el-table-column prop="fundName" label="组合名称" show-overflow-tooltip min-width="220px"> </el-table-column>
                    <el-table-column prop="comFundCode" label="对比组合代码" show-overflow-tooltip min-width="160px"> </el-table-column>
                    <el-table-column prop="comFundName" label="对比组合" show-overflow-tooltip min-width="220px"> </el-table-column>
                    <el-table-column prop="transmitProfit" label="利益输送金额" show-overflow-tooltip align="right" min-width="180px">
                        <template slot-scope="scope">
                            <span>{{scope.row.transmitProfit?scope.row.transmitProfit.toFixed(2):''}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="avgNav" label="期间组合平均净值" show-overflow-tooltip align="right" min-width="180px">
                        <template slot-scope="scope">
                            <span>{{scope.row.avgNav?scope.row.avgNav.toFixed(2):''}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="cr" label="贡献率" show-overflow-tooltip align="right" min-width="120px">
                        <template slot-scope="scope">
                            <span>{{scope.row.cr?Number(scope.row.cr * 100).toFixed(4)+'%':''}}</span>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    background
                    layout="total, sizes, prev, pager, next"
                    :current-page="page.currentPage"
                    :page-sizes="[5, 10, 20, 25, 50]"
                    :page-size="page.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :total="tableData.length"
                    slot="paginationSlot"
                >
                </el-pagination>    
            </template>
        </content-layout>
        <!-- 模型参数设置弹窗 -->
        <el-dialog
            title="模型参数设置"
            :visible.sync="dialogVisible"
            width="450px"
            top="5vh"
            :before-close="handleClose"
            :close-on-click-modal='false'
        >
            <div>
                <el-form ref="form" :model="searchForm" label-width="160px">
                    <el-form-item label="时间窗长：">
                        <el-input-number v-model="searchForm.pSamplelen" size="mini" style="width: 223px" type="number" controls-position="right" :min="0"></el-input-number>
                    </el-form-item>
                    <el-form-item label="是否使用反向交易：">
                        <el-select v-model="searchForm.P_REVERSE_FLAG" size="mini" placeholder="">
                            <el-option label="否" value="0"></el-option>
                            <el-option label="是" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否区分交易方向：">
                        <el-select v-model="searchForm.pDirection" size="mini" placeholder="">
                            <el-option label="否" value="0"></el-option>
                            <el-option label="是" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否滚动日期：">
                        <el-select v-model="searchForm.pRollingdate" size="mini" placeholder="">
                            <el-option label="否" value="0"></el-option>
                            <el-option label="是" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="组合比较模式：">
                        <el-select v-model="searchForm.pBilateral" size="mini" placeholder="">
                            <el-option label="单边" value="0"></el-option>
                            <el-option label="双边" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="溢价率算法：">
                        <el-select v-model="searchForm.pPrflag" size="mini" placeholder="">
                            <el-option label="较小量" value="1"></el-option>
                            <el-option label="标准" value="0"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="剔除溢价金额负值：">
                        <el-select v-model="searchForm.pFilterFlag" size="mini" placeholder="">
                            <el-option label="剔除" value="1"></el-option>
                            <el-option label="不剔除" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="资产范围：" size="mini">
                        <el-select v-model="searchForm.pAtypeList" placeholder="" multiple>
                            <el-option label="股票" value="STD_S"></el-option>
                            <el-option label="债券" value="STD_BD"></el-option>
                            <el-option label="基金" value="STD_FD"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="checkContent">确 定</el-button>
            </span>
        </el-dialog>
        <FundDialog 
            :fundVisible='fundVisible'
            @emitCheckGroup="emitCheckGroup"
        ></FundDialog>
    </div>
</template>

<script lang="ts">
import { downLoadFile } from '@/utils/request';
import { Component, Vue } from 'vue-property-decorator';
import RiskPagination from '@/common/components/risk-pagination.vue';
import ContentLayout from '../commom/content-layout.vue';
import FundDialog from '../commom/fund-dialog.vue';

export interface pages {
    total?: number;
    pageSize?: number;
    currentPage?: number;
}

@Component({
    name: 'SameDirectionTradeSummary',
    components: {
        RiskPagination,
        ContentLayout,
        FundDialog
    },
})
export default class SameDirectionTradeSummary extends Vue {
    private tableData: any[] = [];

    private page: pages = {
        currentPage: 1,
        pageSize: 50,
        total: 0,
    };

    // 查询条件
    searchForm: any = {
        pFundList: [], // 选择组合
        pCalendar: 'CHINA_EX', // 计算日历
        pTime: '时间段', // 时间频率
        pViewType: '0', // 视图类型
        pBegDate: '', // 开始日期
        pEndDate: '', // 结束日期
        pSamplelen: '3', // 时间窗长
        // pReverseFlag: '', // 是否使用反向交易
        pDirection: '1', // 是否区分交易方向
        pRollingdate: '0', // 是否滚动日期
        pBilateral: '1', // 组合比较模式
        pPrflag: '1', // 溢价率算法
        pFilterFlag: '2', // 剔除溢价金额负值
        pAtypeList: [], // 资产范围
        P_REVERSE_FLAG: '0'
    };
    // 查询弹窗
    dialogVisible: boolean = false;
    fundVisible: boolean = false;
    tableIs: boolean = false;
    tableLoading: boolean = false;

    async mounted() {
    }
    // 选择组合
    private focusSelect() {
        this.fundVisible = true;
    }
    // 点击查询按钮
    private openSettingDialog() {
        this.dialogVisible = true;
    }
    // 翻页
    private pageChange() {

    }
    private handleClose() {
        this.dialogVisible = false;
    }
    // 点击查询按钮
    private checkContent() {
        if (this.searchForm.pFundList == '') {
            this.$message.warning('请填写【选择组合】的范围');
            return
        }
        if (this.searchForm.pBegDate == '') {
            this.$message.warning('请填写【开始日期】的范围');
            return
        }
        if (this.searchForm.pEndDate == '') {
            this.$message.warning('请填写【结束日期】的范围');
            return
        }
        this.tableIs = true;
        this.tableLoading = true;
        this.dialogVisible = false;
        let searchForm = JSON.parse(JSON.stringify(this.searchForm));
        searchForm.pFundList = searchForm.pFundList.split(',');
        searchForm.pAtypeList = searchForm.pAtypeList.join(',');
        this.$axios.post('/fairTrade/PriceDiffSimulate', searchForm)
        .then((res: any) => {
            this.tableData = [];
            this.page.currentPage = 1;
            this.dialogVisible = false;
            this.tableLoading = false;
            if (res.length != 0) {
                this.tableData = res;
                this.tableIs = true;
                this.yh_message_success('查询成功！')
            } else {
                this.tableIs = false;
                this.yh_message_success('查询成功, 暂无相关数据！')
            }
        })
    }
    // 导出
    exportFile() {
        if (this.tableData.length == 0) {
            this.$message.warning('数据为空！');
            return
        }
        let searchForm = JSON.parse(JSON.stringify(this.searchForm));
        searchForm.pFundList = searchForm.pFundList.split(',');
        searchForm.pAtypeList = searchForm.pAtypeList.join(',');
        downLoadFile({
            url: '/fairTrade/exportPriceDiffSimulate',
            method: 'post',
            data: searchForm,
            loading: true,
            // loadingMsg: '正在准备导出，请稍后··· ···'
        });    
    }
    handleSizeChange(val) {
        this.page.pageSize = val;
    }
    handleCurrentChange(val) {
      this.page.currentPage = val;
    }
    // 选择组合
    emitCheckGroup(param1, param2) {
        this.fundVisible = false;
        if (param2 == 'confirm') {
            this.searchForm.pFundList = [];
            let pFundList = []
            param1.forEach(item => {
                pFundList.push(item.fundCode);
            })    
            this.searchForm.pFundList = pFundList.join(',')
        }
    }
}
</script>
<style lang="scss" scoped>
.fund-list {
    height: 100%;
}
.el-col-6 {
  height: 50px;
}
/deep/ .el-form-item {
    margin-bottom: 0px;
}
/deep/ .el-form-item__label {
    color: #575757;
}
/deep/ .el-pagination .el-select .el-input .el-input__inner {
    background: white;
    border: 1px solid #e5e5ea;
}
</style>
